<template>
  <div class="Classify">
    <Table :loading="loading" :form="form" :table="table" @current="current" @selection="selection">
      <template #form>
        <el-form-item label="分类标题">
          <el-input v-model="form.title" @keyup.enter.native="Search" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="Search">查询</el-button>
          <el-button type="primary" @click="dialog = true">添加</el-button>
        </el-form-item>
      </template>
      <template #table>
        <el-table-column type="selection" width="55" align="center" header-align="center"> </el-table-column>
        <el-table-column prop="title" label="分类" width="200" align="center" header-align="center"> </el-table-column>
        <el-table-column prop="name" label="英文名" width="200" align="center" header-align="center"> </el-table-column>
        <el-table-column prop="tag" label="标签" align="center" header-align="center">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.tag" :key="item._id">{{ item.title }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="操作">
          <template slot-scope="scope">
            <el-button class="mr-10" type="primary" @click="rowEdit(scope.row)">编辑</el-button>

            <el-button type="danger" @click="rowDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Table>
    <el-dialog :title="dialogForm._id ? '编辑' : '新增'" @close="dialogForm = { title: '', tag: [{ title: '', id: 0 }] }" :visible.sync="dialog">
      <div class="w-80pc">
        <el-form :model="dialogForm" label-width="120px">
          <el-form-item label="分类">
            <el-input type="text" v-model="dialogForm.title"></el-input>
          </el-form-item>
          <el-form-item label="英文名">
            <el-input type="text" v-model="dialogForm.name"></el-input>
          </el-form-item>
          <el-form-item label="标签">
            <transition-group name="fade-in-linear">
              <div class="flex ai-center mb-10" v-for="(item, index) in dialogForm.tag" :key="index">
                <el-input v-model="item.title"></el-input>
                <el-button
                  v-show="index + 1 == dialogForm.tag.length"
                  class="ml-10"
                  @click="dialogForm.tag.push({ title: '' })"
                  type="primary"
                  icon="el-icon-plus"
                  circle
                ></el-button>
                <el-button class="ml-10" @click="deleteTag(index)" type="danger" icon="el-icon-delete" circle></el-button>
              </div>
            </transition-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="dialogFormSub" class="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialog: false,
      loading: false,
      form: {
        title: "",

        PageIndex: 1,
        PageSize: 100,
        Count: null,
      },
      table: [],

      dialogForm: { title: "", name: "", tag: [{ title: "", id: 0 }] },
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.$api.get("/Classify", { params: this.form }).then(({ data }) => {
        if (data.Code == 500) this.$message.error("数据异常");
        else {
          let { PageIndex, PageSize, Count, List } = data;

          this.form.PageIndex = PageIndex;
          this.form.PageSize = PageSize;
          this.form.Count = Count;
          this.table = List;
          // .map(v => {
          //   let timer = v.createdAt.split(/[T.]/);
          //   v.createdAt1 = timer[0] + " " + timer[1];
          //   return v;
          // });
        }
        this.loading = false;
      });
    },
    async dialogFormSub() {
      let arr = this.dialogForm.tag.map(v => v.title);
      let x = new Set(arr);
      if (arr.length != x.size) {
        this.$message.error("标签名重复");
        return false;
      }
      const { data } = await this.$api[this.dialogForm._id ? "put" : "post"]("/Classify", this.dialogForm);
      if (data.Code == 200) {
        this.$message.success(data.Msg);
        this.getList();
        this.dialogForm = { title: "", name: "", tag: [{ title: "", id: 0 }] };
        this.dialog = false;
        this.$store.commit("getMenu");
      } else this.$message.error(data.Msg);
    },
    Search() {
      this.form.PageIndex = 1;
      this.getList();
    },
    current({ value, Page }) {
      this.form[Page] = value;
      this.getList();
    },

    deleteTag(index) {
      if (this.dialogForm.tag.length != 1) {
        this.dialogForm.tag.splice(index, 1);
      }
    },
    rowEdit(row) {
      this.dialog = true;
      this.dialogForm = JSON.parse(JSON.stringify(row));
    },
    rowDelete(_id) {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, "此操作将永久删除该"),
          h("span", { style: "color:red" }, "分类"),
          h("span", null, "及"),
          h("span", { style: "color:red" }, "分类下所有文档"),
          h("span", null, ", 是否继续?"),
        ]),
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "error",
      })
        .then(() => {
          this.$api.delete("/Classify", { params: { _id } }).then(({ data }) => {
            if (data.Code == 200) {
              this.$message.success(data.Msg);
              this.getList();
              this.$store.commit("getMenu");
            } else this.$message.error(data.Msg);
          });
        })
        .catch();
    },
    selection() {},
  },
  mounted() {
    this.getList();
  },
};
</script>
